<template>
    <div class="recommend">
        <el-carousel height="10rem">
            <el-carousel-item v-for="v in lunbotu" :key="v.id">
                <img class="lunbotu" :src="v.imgUrl">
            </el-carousel-item>
        </el-carousel>
        <h1 class="list-title">新歌推荐</h1>
        <!--</div>-->
        <!--    <div class="songslist"  v-for="item in songsinfo" :key="item.id" @click="listenSong(item.url,item.imgUrl,item.singername,item.songname,item.id,item.timeLength,item.error)">-->
        <!--    <div class="songslistleft">-->
        <!--    <img :src="item.imgUrl" class="songsimg">-->
        <!--    <div class="light">-->
        <!--    <span>{{item.filename}}</span>-->
        <!--    </div>-->
        <!--    </div>-->
        <!--    <div class="addbtn" @click.stop="addToList(item)">-->
        <!--    <i class="el-icon-document-add"></i>-->
        <!--    </div>-->
        <!--    </div>-->
        <listitem :songsinfo="songsinfo"></listitem>
    </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable spaced-comment */

  import listitem from '../player/listitem.vue'

  export default {
    data() {
      return {
        songslist: [], //歌单歌曲的所有信息
        //过滤后保存歌曲的有用信息
        songsinfo: [],
        lunbotu: [],
        loading: true
      }
    },
    created() {
      //轮播图图片
      this.getsongimg();
      //歌曲信息
      this.getSongInfo();
    },
    methods: {
       async getSongInfo() {
        //因为获取hash需要等待这一步axios异步请求完成 所以需要async await;在成功的回调中.then(方法)也行
         await this.$axios.get(this.HOST + '/?json=true').then(res => {
          //获取所有hash和该歌单的歌曲
            res.data.data.forEach((item, index) => {
            this.songslist[index] = item
          })
        })
        //保存所有歌曲的url
        this.songslist.forEach(item => {
          this.$axios.get(this.HOST + '/app/i/getSongInfo.php?cmd=playInfo&hash=' + item.hash).then(res => {
            //songsinfo包含filename:歌手-歌曲名，url：歌曲地址，id:绑定key的索引index，imgUrl:歌曲歌手图片(需要去掉网址中包含的"/{size}"),歌手名，歌曲名，播放时长timeLength
            // this.songsinfo.push({'error':res.data.error,"filename":this.songslist[index].filename,"url":res.data.url,"id":res.data.album_audio_id,"imgUrl":res.data.imgUrl.replace("/{size}",""),"singername":res.data.choricSinger,"songname":res.data.songName,"timeLength":res.data.timeLength})
            this.songsinfo.push({
              'hash': item.hash,
              'error': res.data.error,
              'filename': res.data.fileName,
              'url': res.data.url,
              'id': res.data.album_audio_id,
              'imgUrl': res.data.imgUrl.replace('/{size}', ''),
              'singername': res.data.choricSinger,
              'songname': res.data.songName,
              'timeLength': res.data.timeLength
            })
          })
        })
      },
      getsongimg() {
        this.$axios.get(this.HOST + '/?json=true').then(res => {
          res.data.banner.forEach((item, index) => {
            this.lunbotu.push({'imgUrl': item.imgurl, 'id': index})
          })
        })
      }
    },
    components: {
      listitem
    }
  }
</script>

<style scoped >

    .imgnofull {
        /*width: 100%;*/
        height: 100%;
        background-color: pink;
    }

    .lunbotu {
        /*width: 100%*/
        z-index: 1;
        max-height: 140px;
        max-width: 500px;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
    }

    .el-carousel__item h3 {
        /*color: #475669;*/
        /*font-size: 14px;*/
        opacity: 0.5;
        /*line-height: 200px;*/
        /*margin: 0;*/
    }
    .recommend{
        /*position: fixed*/
        width: 100%;
        bottom: 0;
        padding-bottom :3rem;
    }
    .list-title {
        color: orange;
        font-size: 0.9rem;
        padding-top: 1rem;
    }
</style>
